<template>
  <div class="approveLeaveRecode-warp">
    <a-row>
      <a-col :span="24">
        <Search
          @onSearch="handleSearch"
          :searchOptions="state.searchOptions"
          @change="handleChange"
        ></Search>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-range-picker
          style="width: 100%; margin-top: 4px"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          size="large"
          :placeholder="['选择开始时间', '选择结束时间']"
          @change="onChange"
      /></a-col>
    </a-row>
    <div class="content">
      <a-table
        :scroll="{ y: `calc(100vh - 204px)` }"
        :dataSource="state.dataSource"
        :columns="columns"
        :pagination="false"
        row-key="code"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag
              :color="
                record.status === 1
                  ? 'orange'
                  : record.status === 2
                  ? 'green'
                  : 'red'
              "
            >
              {{
                record.status === 1
                  ? "待审核"
                  : record.status === 2
                  ? "通过"
                  : "驳回"
              }}
            </a-tag>
          </template>
        </template>
        <template #expandedRowRender="{ record }">
          <p style="margin: 0">请假开始时间： {{ record.startTime }}</p>
          <p style="margin: 0">请假结束时间： {{ record.endTime }}</p>
          <p style="margin: 0">情况说明： {{ record.reason }}</p>
        </template>
      </a-table>
    </div>
    <Pagination
      :total="state.total"
      @pageChange="pageChange"
      :pageConfig="state.page"
    >
    </Pagination>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted } from "vue";
import { ref, reactive } from "vue";

import Pagination from "@/components/pagination/index.vue";
import Search from "@/components/search/index.vue";
import { useTeacherApproveLeavePage } from "@/api";
import { authRedict } from "@/utils/cas";
import { useAuthParse } from "@/api/auth/auth";

const state = reactive({
  form: {
    startTime: "",
    endTime: "",
  },
  searchOptions: [
    { label: "姓名", value: "employeeName" },
    { label: "学号", value: "employeeCode" },
  ],

  total: 0,
  page: {
    status: [2, 3],
    operatorCode: "",
    pageNum: 1,
    pageSize: 20,
  },
  params: {},
  dataSource: [],
});

const columns = [
  {
    title: "学号",
    dataIndex: "employeeCode",
    key: "employeeCode",
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "employeeName",
    key: "employeeName",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    align: "center",
    width: 72,
  },
];

const pageChange = ({ pageNum, pageSize }) => {
  state.page.pageNum = pageNum;
  state.page.pageSize = pageSize;
  getData();
};

const handleSearch = ({ selectValue, inputValue }: any) => {
  let conditions = {} as any;
  conditions[selectValue] = inputValue;
  state.params = Object.assign(
    {},
    { ...state.params },
    conditions,
    state.form,
    state.page
  );
  getData();
};

const onChange = (value: Moment[], dateString: string[]) => {
  state.form.startTime = dateString[0] !== "" ? dateString[0] + ":00" : "";
  state.form.endTime = dateString[1] !== "" ? dateString[1] + ":00" : "";
};

const getData = async () => {
  let {
    result: { totalCount, items },
  } = await useTeacherApproveLeavePage({ ...state.params, ...state.page });
  state.dataSource = items || [];
  state.total = totalCount;
};

const handleChange = () => {
  state.params = {};
};

onBeforeMount(() => {
  authRedict("http://mjkq.cqzhxy.cn:18088/m/teacher/approveLeaveRecode");
});
const initState = () => {
  useAuthParse("http://mjkq.cqzhxy.cn:18088/m/teacher/approveLeaveRecode")
    .then(({ success, result: { code, name } }) => {
      if (success) {
        state.page.operatorCode = code;
      }
    })
    .then(() => getData());
};

onMounted(() => {
  initState();
  document.title = "审批记录";
  let ainput = document.querySelectorAll(
    ".approveLeaveRecode-warp .ant-picker-input input"
  );
  ainput.forEach((item: any) => {
    item.addEventListener("focus", () => {
      item.setAttribute("readonly", "false");
    });
  });
});
</script>
<style scoped lang="less">
.approveLeaveRecode-warp {
  .content {
    height: calc(100vh - 134px);
    padding: 6px;
    background-color: #eee;
  }
}
</style>
